<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-date-picker
					class="x_soso"
					v-model="valueDate"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
				<el-input class="x_soso" v-model="search.searchInput" placeholder="请输入机构名称/机构编码搜索"></el-input>
				<el-select class="x_soso" filterable v-model="search.title" placeholder="按停启用搜索">
					<el-option v-for="item in openList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-button type="primary" @click="searchList">查询</el-button>
			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click="reloadVal">刷新</el-button>
				<el-button type="primary" @click="addColumnClick">
					<i class="el-icon-plus"></i>
					添加组织机构
				</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table
				v-loading="loading"
				:data="tableData"
				row-key="schemeId"
				:tree-props="{ childrenDeptList: 'childrenDeptList', hasChildren: 'hasChildren' }"
				style="width: 100%;margin-top: 20px"
				@sort-change='sortChange'
			>
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="机构编码" align="center" width="150" prop="schemeId"></el-table-column>
				<el-table-column label="机构名称" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="机构等级" :sortable="'custom'"  align="center" width="150" prop="schemeSort"></el-table-column>
				<el-table-column label="所属上级机构名称" align="center" width="150" prop="parentSchemeName"></el-table-column>
				<el-table-column label="所属机构编码" align="center" width="150" prop="parentSchemeId"></el-table-column>
				<el-table-column label="创建时间" :sortable="'custom'" align="center" width="180" prop="createTime"></el-table-column>
				<el-table-column label="修改时间" :sortable="'custom'" align="center" width="180" prop="updateTime"></el-table-column>
				<el-table-column label="备注描述" align="center" width="150" prop="remake"></el-table-column>
				<el-table-column fixed="right" label="停启用状态" align="center" width="150">
					<template slot-scope="scope">
						<!-- <div v-if="scope.row.schemeId == 10"></div> -->
						<el-switch
							v-model="scope.row.isEnabled"
							active-color="#13ce66"
							inactive-color="#dedede"
							:active-value="true"
							:inactive-value="false"
							@change="changeSwitch(scope.$index, scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="150">
					<template slot-scope="scope">
						<!-- <div v-if="scope.row.schemeId == 10"></div> -->
						<el-button  @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination
					background
					@current-change="columnFind"
					:current-page="page.page"
					:page-size="page.pagesize"
					layout="prev, pager, next, jumper, total"
					:total="page.count"
				></el-pagination>
			</div>
		</el-card>
		<el-dialog :title="cname" :visible.sync="dialogVisible" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="选择上级机构" prop="name">
					<el-select filterable v-model="ruleForm.schemeId" style="width: 100%;" placeholder="选择上级机构">
						<el-option v-for="item in options" :key="item.schemeId" :label="item.schemeName" :value="item.schemeId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="机构名称" prop="name"><el-input v-model="ruleForm.scheme_name" placeholder="机构名称" maxlength="20"></el-input></el-form-item>
				<el-form-item label="机构描述" prop="name">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="ruleForm.textarea" maxlength="100"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm()">保存</el-button>
			</span>
		</el-dialog>
		<el-dialog title :visible.sync="dialogColor" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm2" ref="ruleForm2" align="left" label-width="100px" class="demo-ruleForm">
				<el-form-item label="上级机构" prop="name"><el-input disabled :value="parentName"></el-input></el-form-item>
				<el-form-item label="机构名称" prop="name"><el-input v-model="schemeNameEdit" placeholder="请输入机构名称" maxlength="20"></el-input></el-form-item>
				<el-form-item label="机构描述" prop="name">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="textareaEdit" maxlength="100"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogColor = false">取 消</el-button>
				<el-button type="primary" @click="submitFormEditor()">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import Cookie from 'js-cookie';
import { getDeptList, addDept, getAllDeptList, setDep, editorDep, editorUpdateDep, getSuperDeptList } from '../../../server/index.js';
export default {
	inject: ['reload'],
	data() {
		return {
			valueDate: [],
			//查询
			search: {},
			loading: true,
			tableData: [],
			options: [],
			optionsEdit: [],
			ruleForm: {},
			ruleForm2: {},
			parentName: '',
			schemeNameEdit: '',
			textareaEdit: '',
			openList: [
				{
					id: 0,
					name: '停用'
				},
				{
					id: 1,
					name: '启用'
				}
			],
			cname: '添加组织机构',
			page: {
				count: 0,
				pagesize: 10,
				page: 1
			},
			dialogVisible: false,
			dialogColor: false,
			sotrType:true,
		};
	},
	mounted() {
		var page = 1;
		this.columnFind(page);
		this.optionsData();
		Cookie.remove('tabList');
	},

	methods: {
		// 查询、
		searchList() {
			this.columnFind(1, '');
		},
		// 刷新方法
		reloadVal() {
			this.reload();
		},
		// 排序
		sortChange(sortData) { 
			console.log(sortData)
			let orderBy;
			if(sortData.order != null){
				orderBy = sortData.prop;
				if(sortData.order == 'ascending'){
					orderBy += ' asc';
				}else{
					orderBy += ' desc';
				}
			}
			this.columnFind(1,orderBy);
		},
		// 查询列表
		columnFind(page, orderFlag) {
			const _this = this;
			_this.page.page = page;
			let startTime = _this.valueDate[0];
			let endTime = _this.valueDate[1];
			let obj = {
				page: _this.page.page,
				rows: _this.page.pagesize,
				keyword: undefined == _this.search.searchInput ? '' : _this.search.searchInput,
				startTime: undefined == startTime ? '' : startTime,
				endTime: undefined == endTime ? '' : endTime,
				schemeSort: '',
				isEnabled: undefined == _this.search.title ? '' : _this.search.title,
				orderBy: undefined == orderFlag ? '' : orderFlag,
			};
			_this.http.request({
				url: getDeptList,
				data: obj,
				success: function(res) {
					_this.loading = false;
					_this.tableData = res.list;
					_this.page.count = res.total;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
					console.log(err.msg);
					if (err.msg == 'token无效') {
						this.$router.push({ path: '/login' });
					}
				}
			});
		},
		// 听启用
		changeSwitch(index, row) {
			const _this = this;
			let status = '';
			if (row.isEnabled == true) {
				status = 1;
			} else {
				status = 0;
			}
			let dataMsg = {
				deptId: row.schemeId,
				status: status
			};
			_this.http.request({
				url: setDep,
				data: dataMsg,
				success: function(res) {
					if (res == 1) {
						row.isEnabled = true;
					} else {
						row.isEnabled = false;
					}
				},
				error: function(err) {
					row.isEnabled = !row.isEnabled
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		optionsData() {
			const _this = this;
			this.http.request({
				url: getAllDeptList,
				data: '',
				method: 'GET',
				success: function(res) {
					_this.options = res;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		optionsDataEdit(schemeId) {
			const _this = this;
			this.http.request({
				url: getSuperDeptList,
				data: {
					schemeId: schemeId
				},
				success: function(res) {
					_this.optionsEdit = res;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 添加组织机构
		addColumnClick() {
			this.ruleForm = {};
			this.dialogVisible = true;
			this.cname = '添加组织机构';
		},
		// 保存添加
		submitForm() {
			const _this = this;
			if (!_this.ruleForm.schemeId) {
				_this.$message({
					offset: '200',
					message: '请选择上级结构'
				});
				return;
			}
			if (!_this.ruleForm.scheme_name) {
				_this.$message({
					offset: '200',
					message: '请输入机构名称'
				});
				return;
			}

			_this.http.request({
				url: addDept,
				data: {
					parentSchemeId: _this.ruleForm.schemeId,
					schemeName: _this.ruleForm.scheme_name,
					remake: _this.ruleForm.textarea==undefined?'':_this.ruleForm.textarea
				},
				success: function() {
					_this.dialogVisible = false;
					_this.reload();
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 编辑
		cellClick(row) {
			const _this = this;
			_this.cname = '修改组织机构';
			_this.dialogColor = true;
			_this.schemeId = row.schemeId;
			_this.optionsDataEdit(_this.schemeId);
			_this.http.request({
				url: editorDep,
				data: {
					deptId: row.schemeId
				},
				success: function(res) {
					if (!res.parentSchemeName) {
						_this.parentName = '';
					} else {
						_this.parentName = res.parentSchemeName;
					}
					if (!res.schemeName) {
						_this.schemeNameEdit = '';
					} else {
						_this.schemeNameEdit = res.schemeName;
					}
					if (!res.parentSchemeId) {
						_this.textareaEdit = '';
					} else {
						_this.textareaEdit = res.remake;
					}
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 保存编辑
		submitFormEditor() {
			const _this = this;
			/* if (!_this.schemeIdEdit) {
					_this.$message({
						offset: '200px',
						message: '请选择上级结构'
					});
					return;
				} */
			if (!_this.schemeNameEdit) {
				_this.$message({
					offset: '200',
					message: '请输入机构名称'
				});
				return;
			}

			let dataMsg = {
				schemeId: _this.schemeId,
				schemeName: _this.schemeNameEdit,
				remake: _this.textareaEdit
			};
			_this.http.request({
				url: editorUpdateDep,
				data: dataMsg,
				success: function() {
					_this.dialogColor = false;
					_this.reload();
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.el-button--primary {
	background: rgba(113, 106, 202, 1);
	border: none;
}

.el-button--primary:hover {
	color: #606266;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(113, 106, 202, 1);
}

.el-button--warning {
	color: #fff;
	background-color: #f4516c;
	border-color: #f4516c;
}
</style>
